<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html>
<head>
<title>Drawing with Cairo II</title>
<link rel="stylesheet" href="/cfg/format.css" type="text/css">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="keywords" content="GUI, Java Gnome, Cairo, drawing, Java, programming, Linux">
<meta name="description" content="Drawing with Cairo II">
<meta name="language" content="en">
<meta name="author" content="Jan Bodnar">
<meta name="distribution" content="global">

<script type="text/javascript" src="/lib/jquery.js"></script>
<script type="text/javascript" src="/lib/common.js"></script>

</head>

<body>

<div class="container">

<div id="wide_ad" class="ltow">
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* 160x600, August 2011 */
google_ad_slot = "2484182563";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

<div class="content">


<a href="/" title="Home">Home</a>&nbsp;
<a href="..">Contents</a>


<h1>Drawing with Cairo II</h1>

<p>
In this part of the Java Gnome programming tutorial, 
we will continue drawing with the Cairo library.
</p>

<div class="center">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-9706709751191532";
/* top_horizontal */
google_ad_slot = "3327173442";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>


<h2>Donut</h2>

<p>
In the following example we create a complex shape by 
rotating a bunch of ellipses. 
</p>

<div class="codehead">donut.java</div> 
<pre class="code">
package com.zetcode;

import org.freedesktop.cairo.Context;
import org.freedesktop.cairo.Matrix;

import org.gnome.gdk.Event;
import org.gnome.gdk.EventExpose;
import org.gnome.gtk.DrawingArea;
import org.gnome.gtk.Gtk;
import org.gnome.gtk.Widget;
import org.gnome.gtk.Window;
import org.gnome.gtk.WindowPosition;


/**
 * ZetCode Java Gnome tutorial
 *
 * This program draws a Donut
 * shape on the drawing area.
 *
 * @author jan bodnar
 * website zetcode.com
 * last modified March 2009
 */

public class GDonut extends Window
            implements Widget.ExposeEvent {

    
    public GDonut()  {
    
        setTitle("Donut");
        
        initUI();
        
        connect(new Window.DeleteEvent() {
            public boolean onDeleteEvent(Widget source, Event event) {
                Gtk.mainQuit();
                return false;
            }
        });
        
        setDefaultSize(300, 260);
        setPosition(WindowPosition.CENTER);
        showAll();
    }
 
 
    public void initUI() {
        DrawingArea darea = new DrawingArea();
        darea.connect(this);
        add(darea);
    }
 
    public boolean onExposeEvent(Widget widget, EventExpose eventExpose) {
        final Context cr;
    
        cr = new Context(widget.getWindow());    
        drawDonut(cr);
     
        return false;
    }
   
    public void drawDonut(Context cr) {
        int width = this.getWindow().getWidth();
        int height = this.getWindow().getHeight();

        cr.setLineWidth(0.5);
        cr.translate(width/2, height/2);
        cr.arc( 0, 0, 120, 0, 2 * Math.PI);
        cr.stroke();
        cr.save();

        for ( int i = 0; i < 36; i++) {
            Matrix mat = new Matrix();
            mat.rotate(i*Math.PI/36);
            mat.scale(0.3, 1);
            cr.transform(mat);
            cr.arc(0, 0, 120, 0, 2 * Math.PI);
            cr.restore();
            cr.stroke();
            cr.save();
        }
    }
    

    public static void main(String[] args)  {
        Gtk.init(args);
        new GDonut();
        Gtk.main();
    }
}
</pre>

<p>
In this example, we create a donut. The shape resembles a cookie, hence the name donut.
</p>

<pre class="explanation">
 cr.translate(width/2, height/2);
 cr.arc( 0, 0, 120, 0, 2 * Math.PI);
 cr.stroke();
</pre>

<p>
In the beginning there is an ellipse. 
</p>

<pre class="explanation">
 Matrix mat = new Matrix();
 mat.rotate(i*Math.PI/36);
 mat.scale(0.3, 1);
 cr.transform(mat);
 cr.arc(0, 0, 120, 0, 2 * Math.PI);
 cr.restore();
 cr.stroke();
 cr.save();
</pre>

<p>
After several rotations, there is a donut.
</p>


<br>
<img src="/img/gui/javagnome/donut.jpg" alt="Donut">
<div class="figure">Figure: Donut</div>
<br>

<h2>Gradients</h2>

<p>
In computer graphics, gradient is a smooth blending of shades from 
light to dark or from one color to another. In 2D drawing programs 
and paint programs, gradients are used to create colorful backgrounds and
special effects as well as to simulate lights and shadows. (answers.com) 
</p>

<div class="codehead">gradients.java</div> 
<pre class="code">
package com.zetcode;

import org.freedesktop.cairo.Context;

import org.freedesktop.cairo.LinearPattern;

import org.gnome.gdk.Color;
import org.gnome.gdk.EventExpose;
import org.gnome.gtk.DrawingArea;
import org.gnome.gtk.Gtk;
import org.gnome.gtk.Widget;
import org.gnome.gtk.Window;
import org.gnome.gtk.WindowPosition;

/**
 * ZetCode Java Gnome tutorial
 *
 * This program draws gradients.
 *
 * @author jan bodnar
 * website zetcode.com
 * last modified March 2009
 */


public class GGradients extends Window implements Widget.ExposeEvent {

    public GGradients() {
    
        setTitle("Gradients");
        
        initUI();

        connect(new Window.DeleteEvent() {
            public boolean onDeleteEvent(Widget source, Event event) {
                Gtk.mainQuit();
                return false;
            }
        });
    
        setDefaultSize(340, 390);
        setPosition(WindowPosition.CENTER);
        showAll();
    } 
    
    public void initUI() {
        DrawingArea darea = new DrawingArea();
        darea.connect(this);
        add(darea);        
    }

    public boolean onExposeEvent(Widget widget, EventExpose eventExpose) {
        final Context cr;
        
        cr = new Context(widget.getWindow());    
        drawGradients(cr);
        
        return false;
    }

    public void drawGradients(Context cr) {
    
        LinearPattern lg1 = new LinearPattern(0.0, 0.0, 350.0, 350.0);
       
        int count = 1;

        for (double j=0.1; j<1.0; j+= 0.1) {
            if (count % 2 != 0) {
                lg1.addColorStopRGB(j, 0, 0, 0);
            } else {
                lg1.addColorStopRGB(j, 1, 0, 0);
            }
        count++;
        }

        cr.rectangle(20, 20, 300, 100);
        cr.setSource(lg1);
        cr.fill();

        LinearPattern lg2 = new LinearPattern(0.0, 0.0, 350.0, 0);
       
        count = 1;

        for (double i=0.05; i<0.95; i+= 0.025) {
            if (count % 2 != 0) {
                lg2.addColorStopRGB(i, 0, 0, 0);
            } else {
                lg2.addColorStopRGB(i, 0, 0, 1);
            }
        count++;
        }

        cr.rectangle(20, 140, 300, 100);
        cr.setSource(lg2);
        cr.fill();

        LinearPattern lg3 = new LinearPattern(20.0, 260.0,  20.0, 360.0);
        
        lg3.addColorStopRGB(0.1, 0, 0, 0 );
        lg3.addColorStopRGB(0.5, 1, 1, 0);
        lg3.addColorStopRGB(0.9, 0, 0, 0 );

        cr.rectangle(20, 260, 300, 100);
        cr.setSource(lg3);
        cr.fill();
    }
    
    public static void main(String[] args) {
        Gtk.init(args);
        new GGradients();
        Gtk.main();
    }
}
</pre>

<p>
In our example, we draw three rectangles with three different gradients. 
</p>

<pre class="explanation">
 LinearPattern lg1 = new LinearPattern(0.0, 0.0, 350.0, 350.0);
</pre>

<p>
Here we create a linear gradient pattern. The parameters specify the line, 
along which we draw the gradient. In our case it is a diagonal line. 
</p>

<pre class="explanation">
 LinearPattern lg3 = new LinearPattern(20.0, 260.0,  20.0, 360.0);        
 lg3.addColorStopRGB(0.1, 0, 0, 0 );
 lg3.addColorStopRGB(0.5, 1, 1, 0);
 lg3.addColorStopRGB(0.9, 0, 0, 0 );
</pre>

<p>
We define color stops to produce our gradient pattern. In this case, 
the gradient is a blending of black and yellow colors. By adding two black 
and one yellow stops, we create a horizontal gradient pattern. What do these 
stops actually mean? In our case, we begin with black color, which will 
stop at 1/10 of the size. Then we begin to gradually paint in yellow, which 
will culminate at the centre of the shape. The yellow color stops at 9/10 
of the size, where we begin painting in black again, until the end. 
</p>


<br>
<img src="/img/gui/javagnome/gradients.png" alt="Gradients">
<div class="figure">Figure: Gradients</div>
<br>

<h2>Star</h2>

<p>
In the following example, we create a moving star. The star moves, 
rotates and grows/shrinks.
</p>

<div class="codehead">star.java</div> 
<pre class="code">
package com.zetcode;

import java.util.Timer;
import java.util.TimerTask;

import org.freedesktop.cairo.Context;
import org.freedesktop.cairo.Matrix;

import org.gnome.gdk.Event;
import org.gnome.gdk.EventExpose;
import org.gnome.gtk.DrawingArea;
import org.gnome.gtk.Gtk;
import org.gnome.gtk.Widget;
import org.gnome.gtk.Window;
import org.gnome.gtk.WindowPosition;

/**
 * ZetCode Java Gnome tutorial
 *
 * This program shows an animated star. Rotate, 
 * translate and scale operations are 
 * applied on the star.
 *
 * @author jan bodnar
 * website zetcode.com
 * last modified March 2009
 */

public class GStar extends Window
            implements Widget.ExposeEvent {

    private static Timer timer;
    private int count;
    
    private double angle = 0;
    private double scale = 1;
    private double delta = 0.01;

    double points[][] = { 
        { 0, 85 }, { 75, 75 }, { 100, 10 }, { 125, 75 }, 
        { 200, 85 }, { 150, 125 }, { 160, 190 }, { 100, 150 }, 
        { 40, 190 }, { 50, 125 }, { 0, 85 } 
    };

    public GStar() {
    
        setTitle("Star");
    
        timer = new Timer();
        timer.scheduleAtFixedRate(new ScheduleTask(), 100, 20);
        count = 0;
        
        initUI();
        
        connect(new Window.DeleteEvent() {
            public boolean onDeleteEvent(Widget source, Event event) {
                timer.cancel();
                Gtk.mainQuit();
                return false;
            }
        });
        
        setSizeRequest(350, 250);
        setPosition(WindowPosition.CENTER);
        showAll();
    }
    
    public void initUI() {
        DrawingArea darea = new DrawingArea();
        darea.connect(this);
        add(darea);
    }
    
    public void drawStar(Context cr) {
     
        int width = this.getWindow().getWidth();
        int height = this.getWindow().getHeight();
     
        cr.setSource(0, 0.44, 0.7);
        cr.setLineWidth(1);

        Matrix mat = new Matrix();
        
        mat.translate(width/2, height/2);
        mat.rotate(angle);
        mat.scale(scale, scale);
        cr.transform(mat);

        for ( int i = 0; i < 10; i++ ) {
            cr.lineTo(points[i][0], points[i][1]);
        }

        cr.fill();
        cr.stroke();

        if ( scale < 0.01 ) {
            delta = -delta;
        } else if (scale > 0.99) {
            delta = -delta;
        }

        scale += delta;
        angle += 0.01;
    }

    public boolean onExposeEvent(Widget widget, EventExpose eventExpose) {
    
        Context cr = new Context(widget.getWindow());
        drawStar(cr);
        
        return false;
    }

    class ScheduleTask extends TimerTask {

        public void run() {
             count++;
             queueDraw();
        }
    } 
    
    public static void main(String[] args)  {
        Gtk.init(args);
        new GStar();
        Gtk.main();
    }
}
</pre>

<p>
We apply translate, scale and rotate operations on a star shape.
</p>

<pre class="explanation">
 public boolean onDeleteEvent(Widget source, Event event) {
     timer.cancel();
     Gtk.mainQuit();
     return false;
 }
</pre>

<p>
For a clean exit, we must not forget to stop
the timer. Timer is and object of the java util
library and is not stopped by the <b class="keyword">
Gtk.mainQuit()</b> method. 
</p>

<pre class="explanation">
 double points[][] = { 
     { 0, 85 }, { 75, 75 }, { 100, 10 }, { 125, 75 }, 
     { 200, 85 }, { 150, 125 }, { 160, 190 }, { 100, 150 }, 
     { 40, 190 }, { 50, 125 }, { 0, 85 } 
 };
</pre>

<p>
These points are used to build the star shape.
</p>

<pre class="explanation">
 Matrix mat = new Matrix();
  
 mat.translate(width/2, height/2);
 mat.rotate(angle);
 mat.scale(scale, scale);
 cr.transform(mat);
</pre>

<p>
Here we apply the translate, rotate and scale operations on the
star shape. 
</p>

<pre class="explanation">
 for ( int i = 0; i < 10; i++ ) {
     cr.lineTo(points[i][0], points[i][1]);
 }
</pre>

<p>
Here we draw the star. 
</p>


<h2>Waiting</h2>

<p>
In this examle, we use transparency effect to create a waiting demo.
We will draw 8 lines that will gradually fade out creating an illusion,
that a line is moving. Such effects are often used to inform users, 
that a lengthy task is going on behind the scenes. 
An example is streaming video over the internet.  
</p>

<div class="codehead">waiting.java</div>
<pre class="code">
package com.zetcode;


import java.util.Timer;
import java.util.TimerTask;

import org.freedesktop.cairo.Context;

import org.gnome.gdk.Event;
import org.gnome.gdk.EventExpose;
import org.gnome.gtk.DrawingArea;
import org.gnome.gtk.Gtk;
import org.gnome.gtk.Widget;
import org.gnome.gtk.Window;
import org.gnome.gtk.WindowPosition;

/**
 * ZetCode Java Gnome tutorial
 *
 * This program creates a waiting
 * effect. 
 *
 * @author jan bodnar
 * website zetcode.com
 * last modified March 2009
 */

public class GWaiting extends Window 
            implements Widget.ExposeEvent {

    private static Timer timer;
    private int count;

    private final double[][] trs = {
        { 0.0, 0.15, 0.30, 0.5, 0.65, 0.80, 0.9, 1.0 },
        { 1.0, 0.0,  0.15, 0.30, 0.5, 0.65, 0.8, 0.9 },
        { 0.9, 1.0,  0.0,  0.15, 0.3, 0.5, 0.65, 0.8 },
        { 0.8, 0.9,  1.0,  0.0,  0.15, 0.3, 0.5, 0.65 },
        { 0.65, 0.8, 0.9,  1.0,  0.0,  0.15, 0.3, 0.5 },
        { 0.5, 0.65, 0.8, 0.9, 1.0,  0.0,  0.15, 0.3 },
        { 0.3, 0.5, 0.65, 0.8, 0.9, 1.0,  0.0,  0.15 },
        { 0.15, 0.3, 0.5, 0.65, 0.8, 0.9, 1.0,  0.0, }
    };
    


    public GWaiting() {
        setPosition(WindowPosition.CENTER);
        
        timer = new Timer();
        timer.scheduleAtFixedRate(new ScheduleTask(), 100, 80);
        count = 0;
      
        initUI();
        
        connect(new Window.DeleteEvent() {
            public boolean onDeleteEvent(Widget source, Event event) {
                timer.cancel();
                Gtk.mainQuit();
                return false;
            }
        });

        resize(250, 150);
        setTitle("Waiting");
        showAll();
    }
    
    public void initUI() {
        DrawingArea darea = new DrawingArea();
        add(darea);
        darea.connect(this);
    }

    public boolean onExposeEvent(Widget widget, EventExpose eventExpose) {
    
        Context cr = new Context(widget.getWindow());
        drawWaiting(cr);
        
        return false;
    }
    
    private void drawWaiting(Context cr) {
        int w = this.getWidth();
        int h = this.getHeight();
         
        cr.translate(w/2, h/2);
        
        for (int i = 0; i < 8; i++) {
            
            cr.setLineWidth(3);
            cr.setSource(0, 0, 0, trs[count%8][i]);
            
            cr.moveTo(0, -10);
            cr.lineTo(0, -40);
            cr.rotate(Math.PI/4f);
            cr.stroke();
        }
    }

    class ScheduleTask extends TimerTask {

        public void run() {
              count++;
              queueDraw();
        }
    } 
    
    public static void main(String[] args)  {
        Gtk.init(args);
        new GWaiting();
        Gtk.main();
    }
}
</pre>

<p>
We draw eight lines with eight different alpha values. 
</p>


<pre class="explanation">
 private final double[][] trs = {
     { 0.0, 0.15, 0.30, 0.5, 0.65, 0.80, 0.9, 1.0 },
     ....
 };
</pre>

<p>
This is a two dimensional array of transparency values used in this demo. 
There are 8 rows, each for one state. Each of the 8 lines will continuosly use these values. 
</p>

<pre class="explanation">
 cr.setLineWidth(3);
</pre>

<p>
We make the lines a bit thicker, so that they are better visible. 
</p>


<pre class="explanation">
 cr.setSource(0, 0, 0, trs[count%8][i]);
</pre>

<p>
Here we define the transparency value for a line. 
</p>

<pre class="explanation">
 cr.moveTo(0, -10);
 cr.lineTo(0, -40);
 cr.rotate(Math.PI/4f); 
 cr.stroke();
</pre>

<p>
These code lines will draw each of the eight lines. 
</p>


<br>
<img src="/img/gui/javagnome/waiting.png" alt="Waiting">
<div class="figure">Figure: Waiting</div>
<br>

<hr class="btm">

<p>
In this chapter of the Java Gnome programming library, we did some
more advanced drawing with the Cairo library.
</p>

<br>
<div class="center"> 
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* horizontal */
google_ad_slot = "1734478269";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script> 
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> 
</script> 
</div> 
<br>


<div class="botNav, center">
<span class="botNavItem"><a href="/">Home</a></span> ‡ <span class="botNavItem"><a href="..">Contents</a></span> ‡
<span class="botNavItem"><a href="#">Top of Page</a></span>
</div>


<div class="footer">
<div class="signature">
<a href="/">ZetCode</a> last modified March 12, 2009  <span class="copyright">&copy; 2007 - 2012 Jan Bodnar</span>
</div>
</div>

</div> <!-- content -->

</div> <!-- container -->

</body>
</html>

